
<template>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="offic_id" label="公司ID" />
        <el-table-column prop="name" label="角色" />
        <el-table-column prop="data_scope" label="数据范围">
            <template v-slot="scope">
                {{ scope.row.data_scope == 1 ? "全部数据" : scope.row.data_scope == 2 ? "公司数据" : "个人数据" }}
            </template>
        </el-table-column>
        <el-table-column prop="role_level" label="等级" >
            <template v-slot="scope">
                {{ scope.row.role_level == 0 ? "高级" : "低级" }}
            </template>
        </el-table-column>
        
        <el-table-column label="操作">
            <template v-slot="scope">
                <el-link type="primary" @click="GetRoleId(scope.row.id), dialogVisible = true">分配人员</el-link>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" title="用户分配" width="500" :before-close="handleClose">
        <span>用户：</span>
        <el-select v-model="infors.userId" multiple collapse-tags placeholder="请选择要分配的用户" style="width: 240px">
            <el-option v-for="item in dd" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-button type="primary" @click="Allocate">分配</el-button>
    </el-dialog>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
const tableData = ref([])
import http from '../http.js'
onMounted(() => {
    GetShow();
    GetSelect();
})

const infors = ref({
    roleId: "",
    userId: []
})
//分配
const Allocate = () => {
    // console.log(JSON.stringify(infors.value))
    axios.put(http.RBACxie+'/api/Role/UserRoleUpdate', {
        userId:infors.value.userId,
        roleId: infors.value.roleId 
    })
    .then(res => {
        if (res.data.code == 200) {
                ElMessage.success("分配成功")
                dialogVisible.value = false
            }
            else {
                ElMessage.error("分配失败")
            }
    })
    .catch(err => {
        console.log(err)    
    })
    
}
//显示用户
const dd = ref([]);
const GetSelect = () => {
    axios({
        method: "get",
        url: http.RBACdu+"/api/User/UserSelectShow"
    })
        .then(res => {
            dd.value = res.data.data
            // console.log(tableData.value)
        })
}
const dialogVisible = ref(false)
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('你确认关闭对话框吗')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
//获取角色id
const GetRoleId = (id: number) => {
     infors.value.roleId = id;
    // console.log(infor.value.roleId)
}
const infor = ref({
    pageSize: 10,
    pageIndex: 1,
    totalPage: 0,
    totalCount: 0,
   
})
//显示角色
const GetShow = () => {
    axios({
        method: "get",
        url: http.RBACdu+"/api/Role/show",
        params: {
            pageSize: infor.value.pageSize,
            papageIndexeSize: infor.value.pageIndex
        }
    })
        .then(res => {
            tableData.value = res.data.data.list
            infor.value.totalPage = res.data.data.totalPage
            infor.value.totalCount = res.data.data.totalCount
            // console.log(res.data.data.list)
        })
}
</script>